  <template>
  <el-container>
    <el-header>
      <Pagetitle :title="title1" :SecTitle="title2"></Pagetitle>
    </el-header>

    <el-main style="padding: 10px 0px; border-radius: 5px">
      <el-main class="search">
        <span>类型</span>
        <el-input v-model="type" placeholder="请选择类型" style="width: 200px">
        </el-input>
        <span>状态</span>
        <el-select v-model="state" placeholder="请选择状态">
          <el-option label="禁用" value="0"></el-option>
          <el-option label="启用" value="1"></el-option>
        </el-select>
        <el-button type="primary" style="margin: 0px 10px" @click="searchData"
          >筛选</el-button
        >
        <el-button
          type="primary"
          style="margin: 0px 10px; float: right"
          @click="dialogFormVisible = true"
          >添加</el-button
        >
      </el-main>
      <el-table :data="tableData" style="width: 100%; padding: 10px 10px">
        <el-table-column prop="name" label="类型名称" width="200">
        </el-table-column>
        <el-table-column prop="time" label="发布时间"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="operation" label="操作" width="350">
          <template slot-scope="scope">
            <el-button
              type="info"
              size="mini"
              plain
              @click="seeInfoBtn(scope.$index, scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="mini"
              plain
              @click="EditInfoBtn(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              plain
              @click="deleteInfo(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="发布" :visible.sync="dialogFormVisible" center>
        <el-form :model="form">
          <el-form-item label="类型名称：" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态：" :label-width="formLabelWidth">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addInfoData">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="查看" :visible.sync="InfoDialogFormVisible" center>
        <el-descriptions title="" :column="1" border>
          <el-descriptions-item label="类型名称">{{
            seeInfoTable.name
          }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <span v-if="seeInfoTable.status == 0">禁用</span>
            <span v-if="seeInfoTable.status == 1">启用</span>
          </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="InfoDialogFormVisible = false">返回</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改" :visible.sync="EditDialogFormVisible" center>
        <el-descriptions title="" :column="1" border>
          <el-descriptions-item label="类型名称">
            <el-input v-model="seeInfoTable.name" autocomplete="off"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-radio-group v-model="seeInfoTable.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="EditDialogFormVisible = false">返回</el-button>
          <el-button type="primary" @click="editSure">确认</el-button>
        </div>
      </el-dialog>
    </el-main>

    <el-main style="padding: 10px 0px">
      <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
      ></Paging>
    </el-main>
  </el-container>
</template>
<style lang="less" scoped>
.search {
  background-color: #fff;
  margin-top: 10px;
  & > span {
    padding: 0px 10px;
  }
}
</style>
  <script>
import Paging from "../../components/paging/paging.vue";
import Pagetitle from "../../components/common/title.vue";
export default {
  data() {
    return {
      tableData: [],
      title1: "消息系统",
      title2: "消息管理",
      currentPage: 1, //当前页数
      total: 5, //总共多少条，这个需要通过接口获取后赋值
      pagesize: 4, //有2，4，6，8，10可选
      date: "",
      type: "",
      state: "",
      dialogFormVisible: false,
      InfoDialogFormVisible: false,
      EditDialogFormVisible: false,
      form: {
        name: "",
        status: 0,
      },
      seeInfoTable: {
        ID: "",
        name: "",
        status: "",
      },
      formLabelWidth: "120px",
    };
  },
  components: {
    Pagetitle,
    Paging,
  },
  methods: {
    //子组件传入pagesize
    getPagesize(val) {
      this.pagesize = val;
      this.getListData(this.currentPage, this.pagesize, this.type, this.state);
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      this.getListData(this.currentPage, this.pagesize, this.type, this.state);
    },
    //获取页面
    async getListData(page, pagesize, name, status) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/messageType/list",
        data: {
          name: name,
          page: page,
          pageSize: pagesize,
          status: status,
        },
        
      });

      if (res.code == 0) {
        this.total = res.count;
        res.data.forEach((item) => {
          // console.log(item);
          let newTime = this.timeTransfer(item.time);
          item.time = newTime;
          item.status = this.statusTransfer(item.status);
        });
        //this.tableData.splice(0, this.tableData.length);
        // res.data.forEach((item) => {
        //   // console.log(item);
        //   let newTime = this.timeTransfer(item.created);
        //   item.created = newTime;
        //   item.status = this.statusTransfer(item.status);
        // });
        // console.log(res.data)
        this.tableData = res.data;
      }
    },
    //查找接口
    searchData() {
      this.getListData(this.currentPage, this.pagesize, this.type, this.state);
    },
    //编辑信息
    EditInfoBtn(index, row) {
      this.EditDialogFormVisible = true;
      this.seeInfoTable.ID = row.id;
      this.seeInfo(row.id);
    },
    //查看信息
    seeInfoBtn(index, row) {
      this.InfoDialogFormVisible = true;
      this.seeInfo(row.id);
    },
    //查看信息接口
    async seeInfo(seeId) {
      const { data: res } = await this.axios({
        method: "GET",
        url: "/messageType/" + seeId,
        
      });
      if (res.code == 0) {
        this.seeInfoTable.name = res.data.name;
        this.seeInfoTable.status = res.data.status;
      }
    },
    //确认编辑信息
    editSure() {
      var timestamp = new Date().getTime();
      this.EditDialogFormVisible = false;
      //调用后台
      this.editData(
        this.seeInfoTable.ID,
        this.seeInfoTable.name,
        this.seeInfoTable.status,
        timestamp
      );
    },
    //添加信息
    addInfoData() {
      var timestamp = new Date().getTime();
      this.dialogFormVisible = false;
      this.addData(this.form.name, this.form.status, timestamp);
    },
    //添加信息接口
    async addData(name, status, timestamp) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/messageType/add",
        data: {
          name: name,
          status: status,
          time: timestamp,
        },
        
      });
      if (res.code == 0) {
        this.getListData(this.currentPage, this.pagesize);
        this.form.status = 0;
        this.form.name = "";
      }
      console.log(res);
    },
    //删除信息
    deleteInfo(index, row) {
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.deleData(row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
            duration: 700,
          });
          if (res.code == 0) {
            this.tableData.length = this.tableData.length - 1;
            if (this.tableData.length == 0) {
              this.currentPage = this.currentPage - 1;
            }
            this.getListData(
              this.currentPage,
              this.pagesize,
              this.type,
              this.state
            );
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 700,
          });
        });
    },
    //调用删除接口
    async deleData(seeId) {
      const { data: res } = await this.axios({
        method: "GET",
        url: "/messageType/delete/" + seeId,
        
      });
      if (res.code == 0) {
        console.log("删除成功");
        this.getListData(this.currentPage, this.pagesize);
      }
    },
    //调用编辑信息接口
    async editData(id, name, status, timestamp) {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/messageType/update",
        data: {
          id: id,
          name: name,
          status: status,
          time: timestamp,
        },
        
      });
      console.log(res);
      if (res.code == 0) {
        this.getListData(this.currentPage, this.pagesize);
        console.log(id, name, status);
      }
    },
    timeTransfer(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },

    statusTransfer(item) {
      if (item == 0) {
        item = "禁用";
      } else if (item == 1) {
        item = "启用";
      }
      return item;
    },
  },
  created() {
    this.getListData(this.currentPage, this.pagesize);
  },
};
</script>